<template>
  <div class="table-container">
    <slot></slot>
    <!-- table 表格 -->
    <div class="scroll-x no-scrollbar" v-if="!fetching">
      <div class="table" :class="className">
        <div class="table-header">
          <div class="table-row">
            <div
              class="table-col"
              v-for="(headerItem, index) in header"
              :class="[
                index != 0
                  ? index + 1 == header.length
                    ? 'col-end'
                    : 'flex'
                  : 'col-start',
              ]"
              :key="headerItem.name"
              :style="{}"
            >
              <div class="cell">{{ headerItem.name }}</div>
              <div
                class="types scroll-x hidden-bar border-top border-bottom"
                v-if="headerItem.types"
              >
                <div
                  class="type-item cell"
                  v-for="item in headerItem.types"
                  :key="item"
                >
                  {{ item }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="table-content">
          <div
            class="table-row border-bottom"
            v-for="(rowItem, index) in data"
            :key="rowItem.service"
            :class="bindTableRowItemStyle(rowItem, index)"
          >
            <!-- <div class="flex-12 table-row scroll-x hidden-bar" style="flex: 12"> -->
            <div style="width: 100%">
              <div class="flex-1">
                <div class="table-row">
                  <div class="col-start cell name">{{ rowItem.service }}</div>
                  <div class="table-col flex-3">
                    <div
                      class="table-row flex-1 airport-type-item border-bottom"
                      v-for="(rowItem2, index2) in rowItem.serviceType"
                      :key="index2"
                      :class="[
                        index2 % 2 == 1 ? 'background' : 'background-white',
                      ]"
                    >
                      <div class="cell flex-1">{{ rowItem2.name }}</div>

                      <div class="table-col flex-3">
                        <div
                          class="table-row flex-1 airport-type-item"
                          v-for="(rowItem3, index3) in rowItem2.airportType"
                          :class="[
                            index3 % 2 == 1 ? 'background' : 'background-white',
                          ]"
                          :key="index3"
                        >
                          <div class="cell flex-1">{{ rowItem3.name }}</div>

                          <div class="table-col flex-2">
                            <div
                              class="table-row flex-1 airport-type-item"
                              v-for="(
                                rowItem4, index4
                              ) in rowItem3.airportModel"
                              :class="[
                                index4 % 2 == 1
                                  ? 'background'
                                  : 'background-white',
                              ]"
                              :key="index4"
                            >
                              <div class="cell flex-1">{{ rowItem4.name }}</div>

                              <div class="table-col flex-1">
                                <div
                                  class="table-row flex-1 airport-type-item"
                                  style="justify-content: center"
                                  v-for="(
                                    rowItem5, index5
                                  ) in rowItem4.starterType"
                                  :key="index5"
                                >
                                  <div class="cell col-start">
                                    {{ rowItem5 }}
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- consult -->
            <div class="col-end name" v-if="!rowItem.airportType">
              <div @click="consult(rowItem)">
                <svg
                  t="1726667603326"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="4440"
                  width="16"
                  height="16"
                >
                  <path
                    d="M880.64 204.8h-737.28A61.44 61.44 0 0 0 81.92 265.0112v493.9776a61.44 61.44 0 0 0 18.0224 43.4176 59.8016 59.8016 0 0 0 41.7792 16.7936h737.28a61.44 61.44 0 0 0 61.44-61.44v-491.52A61.44 61.44 0 0 0 880.64 204.8z m0 573.44h-737.28a20.8896 20.8896 0 0 1-20.48-20.48V341.1968l358.8096 206.848a58.9824 58.9824 0 0 0 61.44 0L901.12 341.1968v417.792a20.48 20.48 0 0 1-20.48 19.2512zM901.12 294.0928l-378.88 218.7264a20.48 20.48 0 0 1-20.48 0L122.88 294.0928v-29.0816A20.48 20.48 0 0 1 143.36 245.76h737.28a20.48 20.48 0 0 1 20.48 20.48v26.624z"
                    p-id="4441"
                    fill="#36434D"
                  ></path>
                </svg>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <template v-else>
      <div class="pc-skeleton">
        <Skeleton pc gap-skeleton block v-for="i in 12" :key="i"></Skeleton>
      </div>
      <div class="mobile-skeleton">
        <Skeleton mobile gap-skeleton block v-for="i in 6" :key="i"></Skeleton>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import { inject } from "vue";
import type { TableHeaderItem, TableRowItem } from "../../../types/table";

const fetching = inject("fetching");

const emits = defineEmits(["consult"]);
const consult = (data) => {
  let obj = {
    service_code: data.service,
    repair_service: data.repair,
    type: props.type,
    country_title: getTitleString(data, "serviceType"),
    airport_title: getTitleString(data, "airport"),
    airmodel_title: getTitleString(data, "airmodel"),
    engine_title: getTitleString(data, "engine"),
  };
  emits("consult", obj);
};
const getTitleString = (data, key: string) => {
  let titleArr: string[] = [];
  data.serviceType.forEach((item) => {
    if (key == "serviceType") {
      titleArr.push(item.name);
    }
    item.airportType.forEach((item) => {
      if (key == "airport") {
        titleArr.push(item.name);
      }
      item.airportModel.forEach((item) => {
        if (key == "airmodel") {
          titleArr.push(item.name);
        }
        item.starterType.forEach((item) => {
          if (key == "engine") {
            titleArr.push(item);
          }
        });
      });
    });
  });
  return titleArr.join(",");
};

type Props = {
  header: TableHeaderItem[];
  data: TableRowItem[];
  className: string;
  type: string;
};
const props = defineProps<Props>();

// 解决repair文字布局问题
const textLayout = computed(() => {
  return (text: string) => {
    let textArr = text.split(" ");
    if (textArr.length > 1) {
      let lastTextstr = textArr.pop();
      return textArr.join(" ") + "<br/>" + lastTextstr;
    } else {
      return text;
    }
  };
});

// 判断airport类型
const judgeType = computed(() => {
  return (variable: string | string[]) => {
    if (Array.isArray(variable)) {
      return "array";
    } else {
      return "string";
    }
  };
});

// 绑定表格头部样式
const headerLength = props.header.length;
const bindTableHeaderItemStyle = computed(() => {
  return (headerItem: TableHeaderItem, index: number) => {
    let styleArr: string[] = [];
    if (props.data[0].city) {
      styleArr.push("flex-1");
    } else {
      let fixedColumn = [
        headerItem.types ? "" : "col-start",
        index == headerLength - 1 ? "col-end" : "",
        headerItem.types ? "flex-1" : "",
      ];
      styleArr.push(...fixedColumn);
    }
    return styleArr;
  };
});

// 绑定表格内容样式
const bindTableRowItemStyle = computed(() => {
  return (rowItem: TableRowItem, index: number) => {
    let styleArr: string[] = [index % 2 == 1 ? "background" : ""];
    if (rowItem.city) {
      styleArr.push("row-col-flex");
    } else {
    }
    return styleArr;
  };
});

// 绑定滚动

const bindScrollX = () => {
  let tables = document.querySelectorAll(".table");
  tables.forEach((table, index) => {
    if (index !== 1) {
      let scrollRows = table.querySelectorAll(".scroll-x");
      scrollRows.forEach((scrollRow) => {
        scrollRow.addEventListener("scroll", (e) => {
          let dom = e.target as HTMLElement;
          scrollRows.forEach((item) => {
            item.scrollLeft = dom.scrollLeft;
          });
        });
      });
    }
  });
};

onMounted(() => {
  bindScrollX();
});
</script>
<style scoped lang="less"></style>
